<template>
  <Menu
    v-model="currentRoute"
    :mode="isMobile ? 'inline' : 'horizontal'"
    :theme="isMobile ? 'dark' : 'light'"
    @click="changeRoute"
  >
    <MenuItem v-for="(extra, name) in navs" :key="name.toLowerCase()">
      <a v-if="extra" :href="url[name]" target="_blank">
        {{ name.replace('-', ' ') }}
      </a>
      <div v-else>
        <div>{{ name.replace('-', ' ') }}</div>
      </div>
    </MenuItem>
  </Menu>
</template>

<script lang="ts">
import { Vue, Component } from 'nuxt-property-decorator'

import { Menu } from 'ant-design-vue'

const MenuItem = Menu.Item

@Component({
  components: {
    Menu,
    MenuItem
  }
})
export default class Nav extends Vue {
  navs = {
    HOF: false,
    WTH: false,
    Mint: false,
    Roadmap: false
  }

  get isMobile() {
    return this.$accessor.isMobile
  }

  get url() {
    return this.$accessor.url
  }

  get currentRoute() {
    if (this.$accessor.route.name === 'liquidity') {
      return ['swap']
    }
    if (this.$accessor.route.name === 'lend') {
      return ['supply']
    }
    return [this.$accessor.route.name]
  }

  set currentRoute(route) {}

  changeRoute({ key }: { key: string }): void {
    if (!(this as any).navs[key]) {
      this.$router.push(`/${key}/`)
    }
    // to close menu on mobile mode
    this.$emit('onSelect')
  }
}
</script>

<style lang="less">
@import '../styles/variables';
@media screen and (max-width: 850px) {
  .ant-menu > .ant-menu-item > div {
    font-size: 12px !important;
    margin: 0 4px !important;
  }
  .ant-menu-item {
    padding: 3px !important;
  }
}
.ant-menu {
  text-transform: capitalize;
  background: transparent;
}
.ant-menu > .ant-menu-item > div {
  color: #0c0c0c;
  font-family: @fre-font;
  font-size: 20px;
  margin: 0 10px;
  font-weight: bold;
}
.ant-menu .ant-menu-item-selected div {
  color: @p-color;
  font-family: @fre-font;
  font-size: 18px;
  margin: 0 10px;
}
.ant-menu-horizontal {
  line-height: 62px;
  border-bottom: none;
}

.ant-menu-horizontal > .ant-menu-item:hover,
.ant-menu-horizontal > .ant-menu-submenu:hover,
.ant-menu-horizontal > .ant-menu-item-active,
.ant-menu-horizontal > .ant-menu-submenu-active,
.ant-menu-horizontal > .ant-menu-item-open,
.ant-menu-horizontal > .ant-menu-submenu-open,
.ant-menu-horizontal > .ant-menu-item-selected,
.ant-menu-horizontal > .ant-menu-submenu-selected {
  border-bottom: none;
}
</style>
